<template>
  <el-dialog :title="!dataForm.id ? '新建' :'编辑'"
             :close-on-click-modal="false" append-to-body
             :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll
             width="60%"
  >
    <el-row :gutter="20" class="">
      <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
        <template v-if="!loading">
          <el-col :span="24">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-row :gutter="20">
                  <el-col :span="18">
                    <el-form-item label="项目"
                                  prop="project"
                    >
                      <el-select v-model="dataForm.project"
                                 placeholder="请选择" clearable :style='{"width":"100%"}'
                      >
                        <el-option v-for="(item, index) in projectOptions" :key="index" :label="item.fullName"
                                   :value="item.id" :disabled="item.disabled"
                        ></el-option>

                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备类型"
                                  prop="equipmentType"
                    >
                      <el-select v-model="dataForm.equipmentType"
                                 placeholder="请选择" clearable :style='{"width":"100%"}'
                      >
                        <el-option v-for="(item, index) in equipmentTypeOptions" :key="index" :label="item.fullName"
                                   :value="item.id" :disabled="item.disabled"
                        ></el-option>

                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备名称"
                                  prop="equipmentName"
                    >
                      <el-input v-model="dataForm.equipmentName"
                                placeholder="请输入" clearable :style='{"width":"100%"}'
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="计费规则"
                                  prop="billingRules"
                    >
                      <el-input v-model="dataForm.billingRules"
                                placeholder="请输入" clearable :style='{"width":"100%"}'
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="表类型"
                                  prop="type"
                    >
                      <el-select v-model="dataForm.type"
                                 placeholder="请选择" clearable :style='{"width":"100%"}'
                      >
                        <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.fullName"
                                   :value="item.id" :disabled="item.disabled"
                        ></el-option>

                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="上期读数"
                                  prop="previousReading"
                    >
                      <el-input v-model="dataForm.previousReading"
                                placeholder="请输入" clearable :style='{"width":"100%"}'
                      >

                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="上期抄录时间"
                                  prop="previousTime"
                    >
                      <el-date-picker v-model="dataForm.previousTime"
                                      placeholder="请选择" clearable :style='{"width":"100%"}' type="date"
                                      format="yyyy-MM-dd" value-format="timestamp"
                      >

                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="关联资产"
                                  prop="zcId"
                    >

                          <popupTableSelect   v-model="dataForm.zcId"
                                              placeholder="请选择"  clearable  filterable                         field="assetName" interfaceId="612769091110831365" :columnOptions="assetNamecolumnOptions" propsValue="id" relationField="zcname" popupType="popover"
                                              popupTitle="选择数据"  popupWidth="800px"
                                              hasPage :pageSize="20"   >

                          </popupTableSelect>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </template>
      </el-form>
      <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                    ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"
      />
    </el-row>
    <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false"> 取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from '@/utils/request'
import { getDataInterfaceRes } from '@/api/systemData/dataInterface'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'

export default {
  components: {},
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      btnLoading: false,
      selectDialogVisible: false,
      currTableConf: {},
      addTableConf: {},
      tableRows: {},
      currVmodel: '',
      dataForm: {
        project: '',
        equipmentType: '',
        equipmentName: '',
        billingRules: '月',
        type: '',
        previousReading: '',
        previousTime: '',
        zcId: ''
      },
      rules:
        {
          project: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            }
          ],
          equipmentType: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            }
          ],
          equipmentName: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ],
          billingRules: [
            {
              required: true,
              message: '请至少选择一个',
              trigger: 'blur'
            }
          ],
          type: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            }
          ],
          previousReading: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]

        },
      assetNamecolumnOptions:[{
        value: 'zcname',
        label: '资产名称'
      }

        ,
        {
          value: 'zcnumber',
          label: '资产编码'
        },

        {
          value: 'address',
          label: '地址'
        }],
      projectOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      equipmentTypeOptions: [{ 'fullName': '水表', 'id': '1' }, { 'fullName': '电表', 'id': '2' }],
      typeOptions: [{ 'fullName': '用户表', 'id': '1' }, { 'fullName': '总表', 'id': '2' }]

    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    clearData() {
      this.dataForm.project = ''
      this.dataForm.equipmentType = ''
      this.dataForm.equipmentName = ''
      this.dataForm.billingRules = '月'
      this.dataForm.type = ''
      this.dataForm.previousReading = ''
      this.dataForm.previousTime = ''
      this.dataForm.zcId = ''
    },
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields()
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/example/ZcglPropertyEquipment/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        } else {
          this.clearData()
        }
      })
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.request()
        }
      })
    },
    request() {
      this.btnLoading = true
      let _data = this.dataList()
      if (!this.dataForm.id) {
        request({
          url: '/api/example/ZcglPropertyEquipment',
          method: 'post',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      } else {
        request({
          url: '/api/example/ZcglPropertyEquipment/' + this.dataForm.id,
          method: 'PUT',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      }
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key]
      this.currVmodel = key
      this.selectDialogVisible = true
      this.$nextTick(() => {
        this.$refs.selectDialog.init()
      })
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let item = { ...this.tableRows[this.currVmodel], ...data[i] }
        this.dataForm[this.currVmodel].push(item)
      }
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm))
      return _data
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      this.dataForm = _dataAll
    }
  }
}

</script>
